import React from "react";
import { useSelector, useDispatch } from "react-redux";
import {
  increment,
  decrement,
  incrementByAmount,
  incrementAsync,
} from "@/store/modules/counterStore";
import { RootState } from "@/store";
import CustomerForm from "@/components/CustomerForm";
import { AppDispatch } from "@/store";
import { Layout, Typography, Card, Space, Button } from "antd";
import "./style.css";

const { Content } = Layout;
const { Title } = Typography;

const Home: React.FC = () => {
  const count = useSelector((state: RootState) => state.counter.value);
  const loading = useSelector((state: RootState) => state.counter.loading);
  const dispatch = useDispatch<AppDispatch>();

  return (
    <Layout className="home-container">
      <Content className="home-content">
        <Title level={2}>客户信息管理系统</Title>
        <CustomerForm />

        {/* 原有计数器组件，如需可注释掉 */}
        <Card
          title="计数器示例"
          className="counter-card"
          style={{ marginTop: "24px" }}
        >
          <Space>
            <Button type="primary" onClick={() => dispatch(decrement())}>
              -
            </Button>
            <span className="counter-value">
              {loading ? "加载中..." : `当前值: ${count}`}
            </span>
            <Button type="primary" onClick={() => dispatch(increment())}>
              +
            </Button>
            <Button onClick={() => dispatch(incrementByAmount(5))}>+5</Button>
            <Button onClick={() => dispatch(incrementAsync(5))}>
              +5 (异步)
            </Button>
          </Space>
        </Card>
      </Content>
    </Layout>
  );
};

export default Home;
